@import ./_slider
header
    // height: 700px
    // overflow: hidden
    border-radius: 0 0 5px 5px
    .menu
        
        margin: 0px auto
        padding: 0px 62px
        display: flex
        flex-direction: row-reverse
        justify-content: space-between
        align-items: center
        background-color: #363636
        .phone
            // font-size: 1.1em
            color: $back_color
            display: flex
            font-weight: 400

            .phone__icon
                display: none
                align-self: center
                svg
                    fill:$back_color
                    width: 2.2em
                    height: 2.2em
                    
                    
            .phone__number
                align-self: center
                div
                    padding: 0.2em


        .menu__nav
            // font-size: 22px
            font-weight: 400
            color: $back_color
            margin-left: -24px
            ul
                display: flex
                // flex-direction: column
                margin: 24px
                border-color: $text_color
                border-radius: 5px
                li
                    padding: 12px 24px
                    gap: 32px
                    font-size: 1.2em
                li:hover
                    background-color: $hover_color
                    border-radius: 5px
                    color: $active_color




@media (max-width: 1380px)
    header
        .menu
            .menu__phone
                .phone__number
                    display: none
            .phone
                .phone__icon
                    display: block




    
@media (max-width: 1050px)
    header
        min-width: $min_width
        .menu
            min-width: $min_width -16*2
            padding: 0 16px    
            position: relative
            .menu__nav 
                order: -1
                display: none
                position: absolute
                left: 0
                top: 82px
                background-color: #363636
                z-index: 200
                border-radius: 5px 5px 5px 0px
                max-height: 700px
                .menu-header-container
                    ul
                        flex-direction: column
                        padding: 12px 54px 54px 54px
                        align-items: flex-start
                        // gap: 24px
                        li
                            a
                                font-size: 0.9em
        
        .menu__burger 
            position: relative /* задаем относительное позиционирование */
            width: 40px /* определяем размеры блока */
            height: 35px
            display: block
            order: 1
            // margin-left: 10px
        .menu__burger span, .menu__burger:after, .menu__burger:before
            height: 3px
            width: 100%
            position: absolute
            background: #ffffff
            margin: 0 auto
        .menu__burger span
            top: 16px
            transition: 0.5s
        .menu__burger:after, .menu__burger:before
            content: ''
        .menu__burger:after
            bottom: 5px
            transition: 0.8s
        .menu__burger:before
            top: 5px
            transition: 0.8s
        .menu__burger.open-menu span 
            opacity:0
            transition: 0.8s
        
        .menu__burger.open-menu:before 
            transform: rotate(38deg)
            top: 16px
            transition: 0.8s
        
        .menu__burger.open-menu:after 
            transform: rotate(-38deg)
            bottom: 16px
            transition: 0.8s
        .menu__nav.open-nav
            display: flex
            justify-content: flex-start
            flex-wrap: wrap

        // .menu__nav.open-nav
